<template>
    <rx-dialog @handOk="onOk" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <div style="display: flex;flex-direction: column;height: 100%;overflow: hidden">
                    <a-alert style="width: calc(100% - 1px)"
                             :message="i18n('btnScript.buttonShow', '满足以下条件，可以显示按钮')"
                             :description="i18n('btnScript.enterJs', '在下面代码编辑器输入javascript代码作为按钮显示条件，rows：表示选中的行')"
                             type="info"
                             show-icon/>
                    <div style="flex: 1;margin-top: 10px">
                        <rx-monaco-editor ref="javaCode"
                                          v-model="localScript"
                                          style="height: 100%"
                                          language="javascript">
                            <template v-slot:monacoeditor>
                                <div style="display: flex;align-items: center">
                                    <div class="form-tree-certen">
                                        <a-button style="margin-right: 8px;width: 170px">
                                            {{ i18n('insertField', '插入表单字段') }}
                                            <a-icon type="down"/>
                                        </a-button>
                                        <div class="form-tree">
                                            <a-input-search
                                                v-model="search"
                                                style="margin-bottom: 8px;width: 200px;margin-left: 10px"
                                                :placeholder="i18n('enterField', '输入搜索字段')"
                                                @pressEnter="pressEnter(search)"
                                                @search="pressEnter(search)"
                                                allowClear
                                                @change="pressEnter(search)"
                                            />
                                            <a-tree
                                                :multiple="false"
                                                :show-icon="false"
                                                :treeData="treeData"
                                                @select="selectBoNode"
                                            ></a-tree>
                                        </div>
                                    </div>
                                    <a-dropdown>
                                        <a-menu slot="overlay">
                                            <a-menu-item @click="selectBoNodeList(item)" v-for="item in treeDataList" :key="item.key">
                                                {{item.title}}
                                            </a-menu-item>
                                        </a-menu>
                                        <a-button style="margin-right: 8px">{{i18n('insertContext', '插入上下文')}}<a-icon type="down"/></a-button>
                                    </a-dropdown>
                                    <a-button   type="link" @click="insertFor('javaCode')" style="margin-right: 8px">{{i18n('btnScript.loopCode','循环代码')}}</a-button>
                                    <a-button type="link" @click="insertSingle('javaCode')" style="margin-right: 8px">{{i18n('btnScript.singleRow','选中单行')}}</a-button>
                                </div>
                            </template>
                        </rx-monaco-editor>
                    </div>
                </div>
            </div>
        </rx-layout>

    </rx-dialog>
</template>

<script>
import {Util, RxMonacoEditor,RxCommonScript} from "@lowcode/jpaas-common-lib";

import FormBoListApi from "@/api/form/core/formBoList";

export default {
    name: "FormBolistBtnShow",
    components: {
        RxMonacoEditor,
        RxCommonScript
    },
    props: {
        script: {
            type: String,
            default: ""
        },
        isTreeDialog: {
            type: Boolean,
            default: false
        },
        layerid: {
            type: String,
            default: ""
        },
        destroy: {
            type: Function
        },
        pkId: {
            type: String
        },
        fieldDatas: {
            type: Array
        }
    },
    computed: {
        table() {
            return this.$refs.table;
        },
    },
    data() {
        return {
            localScript: "",
            treeDataInit:[],
            treeDataList:[
                {title: this.i18n('btnScript.userId', '当前用户ID'), key: "userId", isField: true},
                {title: this.i18n('btnScript.account', '当前用户账号'), key: "account", isField: true},
                {title: this.i18n('btnScript.userName', '当前用户名称'), key: "fullName", isField: true},
                {title: this.i18n('btnScript.deptId', '当前用户部门ID'), key: "deptId", isField: true},
                {title: this.i18n('btnScript.deptName', '当前用户部门名称'), key: "deptName", isField: true},
                {title: this.i18n('btnScript.companyId', '当前用户公司ID'), key: "companyId", isField: true},
                {title: this.i18n('btnScript.roles', '当前用户角色'), key: "roles", isField: true},
                {title: this.i18n('btnScript.isAdmin', '是否管理员'), key: "admin", isField: true},
            ],
            treeData: [],
            search: '',
        }
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formPermiss", key);
        },
        init() {
            this.localScript = this.script;
            if (this.pkId) {
                FormBoListApi.reloadColumns(this.pkId).then(res => {
                    let fields = res.data.map(item => {
                        return {title: item.header, key: item.field, isField: true};
                    });
                    this.treeData.push(...fields);
                    this.treeDataInit =  JSON.parse(JSON.stringify(this.treeData));
                });
            } else if (this.fieldDatas) {
                let fields = this.fieldDatas.map(item => {
                    return {title: item.comment, key: item.name, isField: true};
                })
                this.treeData.push(...fields)
                this.treeDataInit =  JSON.parse(JSON.stringify(this.treeData));
            }
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
        onOk() {

            Util.closeWindow(this, "ok", this.localScript);
        },
        insertJavaCode(text) {
            this.$refs.javaCode.insertContent(text);
        },
        selectBoNodeList(node){
            this.insertJavaCode("user."+node.key);
        },
        selectBoNode(selKeys, e) {
            let node = e.node.dataRef;
            let isField = node.isField;

            if (!isField) {
                return;
            }
            this.insertJavaCode('row' + "." + node.key);

        },

        insertFor(ctl) {
            let code = `
            for(let i=0;i<rows.length;i++){
               let  row=rows[i];
            }
            `;
            this.$refs[ctl].insertContent(code);
        },
        insertSingle(ctl) {
            let code = `let row=rows[0];
                        `;
            this.$refs[ctl].insertContent(code);
        },
        //搜索
        pressEnter(e){
            this.treeData =JSON.parse(JSON.stringify(this.treeDataInit));
            if(e){
                this.treeData = this.treeDataInit.filter(res=>{
                    //子表
                    if(res.children) {
                        res.children = this.onetoone(res.children)
                        if(res.children.length>0){
                            return  res;
                        }
                    }else {
                        return  res.title.includes(this.search)
                    }
                })
            }
        },
        onetoone(list){
            list = list.filter(item=>{
                if(item.title.includes(this.search)){
                    return true
                }else {
                    return false
                }
            })
            return list
        },
    }

}
</script>

<style scoped>
.form-tree-certen {
    position: relative;
}

.form-tree-certen:hover .form-tree {
    display: block;
}

.form-tree {
    position: absolute;
    top: 44px;
    display: none;
    left: 0px;
    padding: 10px;
    max-height: 300px;
    overflow: auto;
    z-index: 1000;
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #e3e3e3;
}

.FormSolutionDefMappingConfig-easy {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rx-monaco-editor-center {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.formSolution {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.addbutton {
    margin-bottom: 15px;
}

.formSolution-center {
    height: 100%;
    display: flex;
    flex: 1;
}

.formSolution-center-flex {
    flex-direction: column;
}
</style>